<template>
    <div>
        <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
        <div class="tip">规则信息详情</div>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="23">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>规则信息</span>
                    </div>
                    <div>
                        <el-row :gutter="300">
                            <el-col :span="10">
                                <el-form ref="form" :model="ruleData" label-width="80px" disabled>
                                    <el-form-item label="规则名称">
                                        <el-input v-model="ruleData.rulesName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="规则描述">
                                        <el-input v-model="ruleData.rulesDescription"></el-input>
                                    </el-form-item>
                                    <el-form-item label="创建人">
                                        {{ ruleData.founderName }}
                                    </el-form-item>
                                    <el-form-item label="创建时间">
                                        <el-date-picker type="date" v-model="ruleData.createTime"
                                                        disabled></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="使用成员">
                                        <span v-for="(o,index) in ruleData.underScrutinyEn" :key="index" class="text item">
                                          {{ o.clientGroupName }}&nbsp;&nbsp;
                                        </span>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="10">
                                <el-card class="box-card" style="height: 300px">
                                    <span v-show="ruleData.isGroupManager">
                                        超过 {{ruleData.rulesTrigger}} {{ruleData.rulesTimeType}}未回复客户的群聊，提醒群主
                                    </span><p/>
                                    <span v-show="ruleData.isLeadership">
                                        超过 {{ruleData.leadershipTrigger}} {{ruleData.leadershipTimeType}}未回复客户的群聊，提醒领导
                                    </span>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="interspaceH"></div>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="23">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>规则数据</span>
                    </div>
                    <div id="censorshipData">
                        <el-row :gutter="40">
                            <el-col :span="6">
                                <el-card class="box-card" style="height: 150px">
                                    <span style="font-size: 40px">{{ statistics.allTotal }}</span>
                                    <p/>
                                    <span style="size: A3">总触发规则次数</span>
                                </el-card>
                            </el-col>
                            <el-col :span="6">
                                <el-card class="box-card" style="height: 150px">
                                    <span style="font-size: 40px">{{ statistics.today }}</span>
                                    <p/>
                                    <span style="size: A3">今日触发规则次数</span>
                                </el-card>
                            </el-col>
                            <el-col :span="6">
                                <el-card class="box-card" style="height: 150px">
                                    <span style="font-size: 40px">{{ statistics.thisWeek }}</span>
                                    <p/>
                                    <span style="size: A3">本周触发规则次数</span>
                                </el-card>
                            </el-col>
                            <el-col :span="6">
                                <el-card class="box-card" style="height: 150px">
                                    <span style="font-size: 40px">{{ statistics.thisMonth }}</span>
                                    <p/>
                                    <span style="size: A3">本月触发规则次数</span>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "inspection_view",
        props: {
            ruleData: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                statistics:{},
            }
        },
        mounted() {
            this.initTotal()
        },
        methods: {
            initTotal(){
                let that = this;
                this.$request('/api/triggerRecord/getTotal/1_0?rulesId=' + that.ruleData.rulesId,'', 'POST').then((data) => {
                    that.statistics = data.data
                })
            },
            back() {
                this.$emit("currentHandle", {'currentPanel': 'list'})
            }
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    #censorshipData {
        text-align: center;
    }

</style>
